<template>
    <DialogCom :draggable="true" :title="title" :width="'500'" :visible="isVisible" @close="close" @confirm="confirm">
        <template v-slot:content>
            <div class="dataset-content">
                <div class="xbsj-table">
                    <el-table :data="textureList" ref="table" border :cell-style="cellStyle2"
                        :header-cell-style="cellStyleSmall" @current-change="currentChange" highlight-current-row
                        :max-height="285">
                        <el-table-column type="index" label="序号" width="80" align="center"
                            :show-overflow-tooltip="true" />
                        <el-table-column prop="oss" label="名称" :show-overflow-tooltip="true" />
                        <el-table-column label="缩略图" width="200">
                            <template #default="scope">
                                <img :src="scope.row.oss ? `${modelser2Ip}/lib/texture/${scope.row.oss}` : require('@/assets/no-img.png')"
                                    alt="">
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="bottom">
                    <PaginatorCom :currentPage="pages.pageNum" :pageSize="pages.pageSize" :total="total"
                        @update:currentPage="handleCurrentChange" @update:pageSize="handleSizeChange" />
                </div>
            </div>
        </template>
    </DialogCom>
</template>
<script setup lang="ts">
import DialogCom from "@/components/common/DialogCom.vue";
import { watch, ref, onBeforeUnmount, onMounted, nextTick } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "earthsdk-ui";
import { cellStyle, headCellStyle, cellStyleSmall, cellStyle2, } from "@/scripts/tableStyle";
import PaginatorCom from '@/components/common/PaginatorCom.vue';
import { WaterMend } from "@/scripts/cimrtsManager/waterMend";
import { reqGetTexture } from "@/api/modelser2Api";

const props = defineProps({
    isVisible: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: "",
    },
});

const emits = defineEmits(["close", "confirm"]);


const d = createVueDisposer(onBeforeUnmount);
const modelser2Manager = getProjectManager().modelser2Manager;

const pages = ref({
    pageNum: 1,
    pageSize: 5,
})
const total = ref(0)

// cimrts服务ip
const modelser2Ip = modelser2Manager.modelser2Url.match(/^(https?:\/\/[^\/]+)/)?.[1]
// 材质列表
const textureList = ref<any>([])


const texture = ref<any>({})

const currentChange = (item: any) => {
    texture.value = {
        url: `${modelser2Ip}/lib/texture/${item.oss}`,
        textureId: item.id,
        textureSize: item.chicun,

    }

}

/**
 * 监听当前页数变化
 * @param {number} val 
 */
const handleCurrentChange = (val: number) => {
    pages.value.pageNum = val;
    listReqest()
}
/**
 * 监听当前页条数变化
 * @param {number} val 
 */
const handleSizeChange = (val: number) => {
    pages.value.pageSize = val;
    listReqest()
}

// 关闭按钮
const close = () => {
    emits('close')
}
// 确认
const confirm = async () => {
    emits('confirm', texture.value)
}

const listReqest = async () => {
    const param = {
        ...pages.value,
    }
    // 获取材质列表
    const res = await reqGetTexture(param) as any
    textureList.value = res.data.data
    total.value = res.data.total
}

onMounted(async () => {
    await listReqest()
})
</script>

<style scoped>
.is-active {
    border: 1px solid #409eff;
}

.lib-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 9px;
    height: 276px;
    overflow-y: auto;
}

.img-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.img {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
}

.img img {
    width: calc(100%);
    height: calc(100%);
}

.name {
    width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 5px 0;
}

.select-table {
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.actived {
    color: #8383ff;
}

.source>span {
    cursor: pointer;
}

.dataset-content {
    display: flex;
    flex-direction: column;
    height: 340px;
    justify-content: space-between;
}

.xbsj-table {
    margin: 15px 0;
}

.bottom {
    display: flex;
    justify-content: center;
}

.el-table .cell img {
    height: 43px;
    width: 125px;
}
</style>